<script setup lang="ts">
import { reactive, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { usePageScroll } from "@/hooks/scroll";
import { index_api } from "@/package/guider/api/guide_certification";
import { Account } from "@/utils/account";
import { AppData } from "@/utils/app";
import { Router } from "@/utils/router";

import NavBack from "@/components/nav/back.vue";
import NavBar from "@/components/nav/bar.vue";
import NavBg from "@/components/nav/bg.vue";
import NavSpace from "@/components/nav/space.vue";
import IndexMenuTitle from "@/pages/index/components/index-menu-title.vue";
import IndexMoreBtn from "@/pages/index/components/index-more-btn.vue";
import IndexAreaPicker from "./components/index-area-picker.vue";

onLoad(() => {
  index_api().then((resp) => {
    infoData.all_count = resp.guider_cate.all_count;
    typeList.value = resp.guider_cate.items;
    noticeList.value = resp.guider_notice;
    guiderList.value = resp.guider_star;

    tempData.areaList = [resp.in_china, resp.out_china];
    areaClick(0);
  });
});
onShow(() => {
  myData.isCertificate = AppData.userData.is_guide_certification === 1;
});
const { pageIsScroll, onPageScroll } = usePageScroll();

const certificateClick = () => {
  Account.checkLogin((isLogin) => {
    const userData = AppData.userData;
    Router.navigateToOrRedirectTo(
      isLogin,
      userData.is_guide_certification === 1
        ? "/package/guider/pages/detail/index"
        : userData.status === -1
        ? "/package/guider/pages/apply/type"
        : "/package/guider/pages/apply/detail"
    );
  });
};

const infoData = reactive({ all_count: "" });
const typeList = ref<any[]>([]);
const noticeList = ref<string[]>([]);

const guiderList = ref<any[]>([]);
const guiderClick = (id: string) => {
  id
    ? Router.navigateTo(`/package/guider/pages/detail/index?id=${id}`)
    : Router.navigateTo("/package/guider/pages/star/list");
};

const areaIndex = ref(0);
const areaList = ref<any[]>([]);
const areaClick = (index: number) => {
  areaIndex.value = index;
  areaList.value = tempData.areaList[index];
};

const myData = reactive({ isCertificate: false });

const tempData = { areaList: [] as any[][] };
</script>

<template>
  <NavBack />
  <NavBar />
  <NavBg
    :retract="pageIsScroll"
    url="/package/guider/static/certificate-bg.png"
  />
  <NavSpace />

  <view class="index-btn" @click="certificateClick">
    {{ myData.isCertificate ? "已" : "去" }}认证
    <image
      class="index-btn-arrow"
      src="@/package/guider/static/certificate-arrow.png"
    />
  </view>

  <view class="index-info">
    <view class="index-info-num">
      <view class="index-info-num2">全球导游/向导 认证人数</view>
      {{ infoData.all_count }}
    </view>

    <scroll-view class="index-type" scroll-x enhanced :show-scrollbar="false">
      <view class="index-type-space"></view>
      <view class="index-type-item" v-for="i of typeList" :key="i.id">
        <view class="index-type-num">{{ i.count }}</view>
        <view class="index-type-name">{{ i.name }}</view>
      </view>
    </scroll-view>

    <view class="index-notice">
      <image
        class="index-notice-trumpet"
        src="@/package/guider/static/certificate-trumpet.png"
      />
      <swiper class="index-notice-swipe" autoplay circular vertical>
        <swiper-item v-for="i of noticeList" :key="i">
          <view class="index-notice-text">{{ i }}</view>
        </swiper-item>
      </swiper>
    </view>
  </view>

  <view class="index-guider">
    <view class="index-guider-head">
      <IndexMenuTitle title="明星导游榜" />
      <view class="index-guider-more" @click="guiderClick('')">
        <IndexMoreBtn />
      </view>
    </view>
    <scroll-view
      class="index-guider-wrapper"
      scroll-x
      enhanced
      :show-scrollbar="false"
    >
      <view class="index-guider-space"></view>
      <view
        class="index-guider-item"
        v-for="i of guiderList"
        :key="i.guider_id"
        @click="guiderClick(i.guider_id)"
      >
        <image
          class="index-guider-avatar"
          :src="i.avatar_url"
          mode="aspectFill"
        />
        <view class="index-guider-name">{{ i.nickname }}</view>
        <view
          style="display: flex; justify-content: center; align-items: center"
        >
          <image
            class="index-btn-position"
            src="@/package/guider/static/certificate-position.png"
          />
          <view class="index-guider-city">{{ i.city_name }}</view>
        </view>
      </view>
    </scroll-view>
  </view>

  <view class="index-area">
    <view class="index-area-title">
      <IndexMenuTitle title="各地导游认证人数" />
    </view>

    <IndexAreaPicker :modelValue="areaIndex" @update:modelValue="areaClick" />

    <view class="index-area-wrapper">
      <view
        class="index-area-item"
        v-for="(i, d) of areaList"
        :key="i.area_id"
        :style="{
          backgroundColor: d % 4 === 0 || d % 4 === 1 ? '#ffffff' : '',
        }"
      >
        <view class="index-area-text">{{ i.area_name }}</view>
        <view class="index-area-num">{{ i.count }}</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
page {
  padding-top: 100rpx;
}

.index-btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 142rpx;
  height: 56rpx;
  margin-left: 74rpx;
  margin-bottom: 40rpx;
  font-size: 26rpx;
  color: #ffffff;
  border-radius: 28rpx;
  background-color: #ff7900;

  .index-btn-arrow {
    width: 12rpx;
    height: 20rpx;
    margin-left: 10rpx;
  }
}

.index-info {
  position: relative;
  padding-top: 30rpx;
  padding-bottom: 34rpx;
  margin: 0 30rpx 60rpx;
  border-radius: 40rpx;
  border: 2rpx solid #ffffff;
  // backdrop-filter: blur(20rpx);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), #ffffff);

  .index-info-num {
    display: flex;
    align-items: center;
    padding-left: 30rpx;
    font-size: 52rpx;
    color: #ff7900;
    line-height: 74rpx;
    font-weight: bold;
  }

  .index-info-num2 {
    margin-top: 4rpx;
    margin-right: 20rpx;
    font-size: 30rpx;
    color: #7a420f;
    line-height: 42rpx;
    font-weight: 400;
  }
}

.index-type {
  height: 200rpx;
  margin-bottom: 24rpx;
  white-space: nowrap;

  .index-type-space,
  .index-type-item {
    display: inline-block;
    vertical-align: top;
  }

  .index-type-space {
    width: 20rpx;
  }

  .index-type-item {
    width: 130rpx;
    height: 124rpx;
    padding-top: 36rpx;
    margin-top: 20rpx;
    margin-right: 20rpx;
    border-radius: 30rpx;
    background-color: #ffffff;
    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
  }

  .index-type-num {
    margin-bottom: 4rpx;
    font-size: 40rpx;
    color: #16cee4;
    line-height: 56rpx;
    text-align: center;
    font-weight: bold;
  }

  .index-type-name {
    font-size: 24rpx;
    color: #333333;
    line-height: 34rpx;
    text-align: center;
  }
}

.index-notice {
  display: flex;
  align-items: center;
  padding-left: 30rpx;

  .index-notice-trumpet {
    flex-shrink: 0;
    width: 40rpx;
    height: 40rpx;
  }

  .index-notice-swipe {
    flex-grow: 1;
    min-width: 0;
    height: 36rpx;
    margin-left: 10rpx;
  }

  .index-notice-text {
    font-size: 24rpx;
    color: #444444;
    line-height: 36rpx;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.index-guider {
  margin-bottom: 40rpx;

  .index-guider-head {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    margin-bottom: 30rpx;
  }

  .index-guider-more {
    margin-left: auto;
  }

  .index-guider-wrapper {
    height: 294rpx;
    white-space: nowrap;
  }

  .index-guider-space,
  .index-guider-item {
    display: inline-block;
    vertical-align: top;
  }

  .index-guider-space {
    width: 30rpx;
  }

  .index-guider-item {
    width: 190rpx;
    height: 234rpx;
    padding-top: 20rpx;
    margin-top: 20rpx;
    margin-right: 20rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
  }

  .index-guider-avatar {
    display: block;
    width: 130rpx;
    height: 130rpx;
    margin: 0 auto 10rpx;
    border-radius: 50%;
  }

  .index-guider-name {
    margin-bottom: 4rpx;
    font-size: 30rpx;
    color: #333333;
    line-height: 42rpx;
    text-align: center;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .index-btn-position {
    width: 20rpx;
    height: 20rpx;
    margin-right: 6rpx;
  }

  .index-guider-city {
    font-size: 20rpx;
    color: #666666;
    line-height: 28rpx;
  }
}

.index-area {
  padding-bottom: 40rpx;

  .index-area-title {
    padding-left: 30rpx;
    margin-bottom: 60rpx;
  }

  .index-area-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30rpx;
    padding-right: 30rpx;
  }

  .index-area-item {
    display: flex;
    align-items: center;
    width: 50%;
    height: 90rpx;
  }

  .index-area-text {
    width: 146rpx;
    padding-left: 48rpx;
    font-size: 28rpx;
    color: #333333;
  }

  .index-area-num {
    font-size: 28rpx;
    color: #ff7900;
  }
}
</style>